#users{
	padding: 2px 0px;

	background: rgb(240, 245, 250);

	border-left: 1px solid rgb(201,208,218);

	height: 596px;

	overflow: auto;
}

/*192 larg*/
#users .item{
	width: 206px;
	padding: 2px 4px;

	float: left;

	position: relative;

	cursor: pointer;
}

#users .item:hover{
	background: rgb(225,230,240);
}

#users .item .name{
	float: left;
	width: 158px;
}

#users .item .status{
	width: 8px;
	height: 8px;
	float: left;
}

#users .item .picture{
	float: left;
}

#users .item > .name{
	font-size: 11px;
	line-height: 28px;
	margin-left: 7px;
}

#users .item .picture img{
	width: 32px;
	height: 32px;
}

#users .item.online .status, #users .item.away .status{
	margin-top: 13px;
}

#users .item.online .status{
	background: url("../image/status_on.png");
}

#users .item.away .status{
	background: url("../image/status_away.png");
}

#users .item.offline .picture{
	opacity: .3;
}

#users .item.offline .status{
	display: none;
}

#users .item.typing .status{
	background: url("../image/status_typing.png") no-repeat;
	margin-top: 16px;
}

#messages,#replyTree .wrapper{
	height: 508px;

	overflow: auto;

	padding: 5px;
	background: rgb(255,255,255)
}

#replyTree > button.close{
	background: url("../image/close.png");
	width: 13px;
	height: 13px;

	position: absolute;
	right: 5px;
	top: 7px;
}

#replyTree .wrapper{
	width: 515px;
	padding-top: 0px;
}

#messages, #replyTree.scroll .wrapper{
	width: 531px;
}

#replyTree .wrapper .message:first-child{
	margin-top: 0px;
}

#replyTree{
	float: left;
	padding-top: 25px;
}

.button{
	cursor: pointer;
}

.right{
	width: 215px;
	float: left;
}

.center{
	width: 543px;
	float: left;
	position: relative;
	height: 100%;
}

#content .main{
	border: 1px solid rgb(201,208,218);
	border-top-width: 0px;
	float: left;
	height: 600px;
}

.access{
	font-size: 9pt;
	color: rgb(100,100,100);
	padding: 5px 0px;
	margin: 0px 5px;
}

.access p{
	height: 12px;
	line-height: 12px;
}

.access .icon{
	width: 15px;
	height: 12px;
	float: left;
	margin-right: 5px;
}

.access.login .icon{
	background: url("../image/access_in.png") no-repeat;
}

.access.logout .icon{
	background: url("../image/access_out.png") no-repeat;
}

#messages{
	-webkit-scrollbar-track: rgb(200,0,0);
}

#messages .message{
	padding: 5px 0px;
	margin: 0px 5px;
}

#messages .message, #replyTree .message, #messages .access{
	float: left;

	border-top: 1px solid rgb(240,240,240);

	width: 505px;
}

#messages .message:first-child, #replyTree .message:first-child, #messages .access:first-child{
	border: 0 none;
}

#messages .message, #replyTree .message{
	border-top: 1px solid rgb(240,240,240);
}

#messages .message:first-child, #replyTree .message:first-child{
	margin-top: 5px;
}

#replyTree .message .parent, #replyTree .message .reply{
	display: none;
}

#replyTree .list{
	float: left;
}

.message .picture{
	clear: both;

	margin-right: 7px;
}

.message .picture img{
	width: 32px;
	height: 32px;
}

.message .time{
	color: rgb(120,120,120);
	font-style: italic;

	margin-right: 5px;
	margin-top: 6px;

	font-size: 7.5pt;

	float: right;

	visibility: hidden;
}

.message:hover .time{
	visibility: visible;	
}

.message .name, .message .text, .message .reply{
	font-size: 8pt;
}

.message .name, .message .text, .message .reply, .message .picture, .message .quote{
	float: left;
}

.message .name{
	color: rgb(60,90,170);
	font-weight: bold;
	width: 160px;

	margin-bottom: 4px;
}

.message .text{
	font-size: 10pt;

	word-wrap: break-word;

	float: left;

	width: 463px;

	color: rgb(50,50,50);

	white-space: pre-line;

}

.message .reply, .message .showTree{
	cursor: pointer;
}

.message .reply{
	color: rgb(110,130,180);

	clear: both;

	margin-top: 5px;
}

.message .parent{
	float: left;
	padding: 3px 5px;
	margin-bottom: 5px;
	background: rgb(235,240,245);

	width: 495px;

	position: relative;
}

.message .quote{
	font-size: 8pt;
	width: 350px;
	
	color: rgb(100,100,100);
}

.message .quote,.message .parent .name{
	color: rgb(100,100,100);
}

.message .parent .name{
	width: auto;
	margin-right: 5px;
	margin-bottom: 0px;

	
}

.message .name, .message .quote{
	overflow: hidden;
}

.message .reply:hover{
	text-decoration: underline;
}

.message .showTree{				
	background: url("../image/reply_tree.png") no-repeat;

	width: 13px;
	height: 13px;
	padding: 0px;
	padding-left: 15px;
	color: rgb(50,90,150);
	font-size: 8pt;

	float: left;

	position: absolute;
	right: 0px;
}

.message .parent .name, .message .quote, .message .time{
	font-style: italic;
}

.invisible{
	display: none;
}
	
#composeMessageMenu{
	width: 100%;

	float: left;

	padding: 6px 0px;

	height: 25px;

	border-top: 1px solid rgb(230,230,230);
	background: rgb(240,240,240);
}

#messageText{
	width: 542px;
	height: 43px;
	resize: none;
	padding: 5px;
	float: left;
	font-size: 10pt;
}

#reply{
	overflow: hidden;
	width: 400px;
	float: left;
	margin: 5px 5px 0px 5px;

	font-size: 10pt;

	color: rgb(125,125,125);
}

#reply.invisible{
	visibility: hidden;
	display: block;
}

#reply p{
	float: left;
}

#reply .to, #reply .message{
	float: left;
	margin-left: 5px;
}

#reply .message{
	font-style: italic;
}

#reply .cancel{
	margin-top: 2px;
	width: 12px;
	height: 12px;
	background: url("../image/close.png") no-repeat;
	float: right;
}

.center .bottom{
	width: 100%;

	border-top: 1px solid rgb(201,208,218);
	float: left;
	position: absolute;
	bottom: 0px;
}

#shading{
	width: 100%;
	height: 100%;

	position: fixed;

	background: rgba(0,0,0,.75);

	z-index: 2;
}

#replyTree{	
	margin: 50 auto 0 auto;

	background: rgb(255,255,255);
}

#replyTree .loader{
	width: 30px;
	height: 30px;
}

.center .send.button{
	float: right;

	padding: 5px 8px;
	font-size: 8pt;
	margin-right: 15px;

	font-weight: bold;

	color: rgb(255,255,255);
	background: rgb(85,110,160);
	border: 1px solid rgb(25,55,110);
}

/* user info */

#userInformationBox{
	background: rgb(255,255,255);

	border: 1px solid rgb(140,140,140);

	position: absolute;
	z-index: 2;
	left: -385px;

	padding: 10px;
	float: left;

	width: 350px;
}

#userInformationBox .arrow{
	background: url("../image/user_information_box_arrow.png") no-repeat;
	position: absolute;

	width: 20px;
	height: 16px;

	right: -20px;
}

#userInformationBox .picture{
	width: 100px;
	height: 100px;

	float: left;

	margin-right: 10px;
}

#userInformationBox .name{
	float: left;

	font-size: 10pt;

	color: rgb(60,90,170);
	font-weight: bold;

	width: 240px;
	margin-bottom: 5px;
}

#userInformationBox .seeProfile{
	font-size: 8pt;
	color: rgb(150,150,150);
	text-decoration: none;

	float: left;
	margin-top: 33px;
}

#userInformationBox .messageCounter, #userInformationBox .idleTime{
	font-size: 10pt;
	color: rgb(50,50,50);
	
	float: left;
	width: 240px;
	height: 16px;
}

#replyTree .message{
	background: rgb(235,240,245);

	padding: 5px;
	margin: 0px;

	border-top: 1px solid rgb(255,255,255);
}

#replyTree .message:last-child{
	background: rgb(255,255,255);	
}

#shading .sections{
	position: relative;
	float: left;
	left: 50%;
}

#shading .section{
	position: relative;
	float: left;
	left: -50%;
}